import React, { Component } from 'react';
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import "./searchCenter.scss";
import myaxios from "../../utils/myaxios";
import {withRouter} from "react-router-dom"

class searchCenter extends Component {
    //点击搜索按钮事件
    getProductList = (params) => {
        myaxios.get("goods/qsearch",{
            params:{
                query: this.state.inputVal,
            },
        }).then(res => {
            console.log(res)
            this.setState({
                productList:res
            })
        })
    }
    //点击列表产品事件
    handleItemClick = (e) => {
        let goods_id = e.target.getAttribute("data-goods_id");
        this.props.history.push("/GoodDetails/"+goods_id);
    }
    
    state = {
        inputVal:"", //搜索框的值
        productList:[], //搜索到的数据
        img:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=151472226,3497652000&fm=26&gp=0.jpg"
    }
    render() {
        return (
            <div className="yg-sc">
                {/* 头部开始 */}
                <NavBar
                    className="yg-sc-tit"
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >搜索中心</NavBar>
                {/* 头部结束 */}
                {/* 搜索栏开始 */}
                <div className="search">
                    <SearchBar
                        className="yg-sc-search"
                        placeholder="搜索"
                        value={this.state.inputVal}
                        // onSubmit={value => console.log(value, 'onSubmit')}
                        // onClear={value => console.log(value, 'onClear')}
                        // onFocus={() => console.log('onFocus')}
                        // onBlur={() => console.log('onBlur')}
                        onCancel={() => this.getProductList()}
                        showCancelButton
                        cancelText="搜索"
                        onChange={(value) => {
                            this.setState({
                                inputVal:value,
                            })
                        }}
                    />
                </div>
                {/* 搜索栏结束 */}
                {/* 产品列表开始 */}
                <div className="yg-sc-list" onClick={this.handleItemClick}>
                    {
                        this.state.productList.map((v) => {
                            return (
                                <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                                    <div className="left-img">
                                        <img src={this.state.img} alt=""/>
                                    </div>
                                    <div className="right-name">
                                        {v.goods_name}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                {/* 产品列表结束 */}
            </div>
        )
    }
}

export default withRouter(searchCenter)